<template>
	<view>
		<view class="head">
			<view class="top">
			</view>
			<uni-card  style="position: relative; top: -40rpx;" spacing="5px">
				<map style="height: 70vh;width: auto;" :latitude="shopInfo.latitude" :longitude="shopInfo.longitude" :markers="markers" 
					 @callouttap="callouttap"></map>
				<view>
					<view class="line1">
						<view>
							{{shopInfo.storeName}}
						</view>
						<view>
							{{distanceBetweenPoints}}
						</view>
					</view>
					<view class="line2">
						<view class="line2left">
							<view style="display: flex;">
								<uni-rate :readonly="true" size="20" :value="shopInfo.star" />
								{{shopInfo.star}}分
							</view>
							<view>
								营业时间：{{shopInfo.week}}
							</view>
							<view>
								位置：{{shopInfo.address}}
							</view>
						</view>
						<view class="line2right">
							<image :src="shopInfo.licence" style="height: 10vh;width: 20vw;"></image>
						</view>
					</view>
					<u-action-sheet :actions="list" @close="onCloseAction" @select="selectClick"
						:cancelText="qvxiaowenzi" :closeOnClickOverlay="true" :closeOnClickAction="true"
						:show="show"></u-action-sheet>
					<view class="butt">
						<view><u-button shape="circle" @click="show = true"
								customStyle="backgroundColor:#136AEB;width:40vw">
								<image src="/static/images/ys/carFix/phone.png"
									style="height: 2.5vh;width: 4.5vw;margin-right: 3vw;"></image><text
									style="color: white;">联系门店</text>
							</u-button>
						</view>
						<view>
							<u-button @click="carWash" shape="circle" customStyle="backgroundColor:#FF5219;width:40vw">
								<image src="/static/images/ys/carFix/yuyue.png"
									style="height: 2.5vh;width: 4.5vw;margin-right: 3vw;"></image>
								<view style="color: white;">立即预约</view>
							</u-button>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id1:1,
				qvxiaowenzi: "取消拨号",
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				shopInfo:{},
		        
				longitude: '',
				latitude: '',
				markers: [{
					id: 1,
					width: 20,
					height: 30,
					longitude: 113.56045049999999,
					latitude: 34.814811999999996,
					iconPath: '/static/images/ls/椭圆 3 拷贝 2@3x.png',
					callout: {
						content: '附近门店',
						bgColor: '#FC6330',
						color: '#fff',
						fontSize: 14,
						textAlign: 'center',
						display: 'ALWAYS',
						borderRadius: 25,
						padding: 10,
					},
				}],
				list: [{
						name: '13865432154'
					},
					{
						name: '复制'
					}
				],
				show: false
			}
		},
		
		mounted() {
			this.getList(this.id1)
		},
	computed: {
	  distanceBetweenPoints() {
	    // return this.calculateDistance(this.shopInfo.latitude, this.shopInfo.longitude, 35, 114);

	    const distance = this.calculateDistance(this.shopInfo.latitude, this.shopInfo.longitude, 34.813526, 113.560539);
	        // 使用 toFixed(2) 来保留两位小数，并返回字符串
	        return distance.toFixed(2) + 'km';
	  }
	},
		methods: {
			
			callouttap() {
				uni.$u.route('/pages/ls/nearbyStores/nearbyStores');
				// console.log('附近门店');
			},
			 calculateDistance(lat1, lon1, lat2, lon2) {
			  const radians = Math.PI / 180;
			  const R = 6371; // 地球半径，单位为千米
			 
			  const deltaLat = (lat2 - lat1) * radians;
			  const deltaLon = (lon2 - lon1) * radians;
			 
			  lat1 = lat1 * radians;
			  lat2 = lat2 * radians;
			 
			  const a = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
			            Math.cos(lat1) * Math.cos(lat2) *
			            Math.sin(deltaLon / 2) * Math.sin(deltaLon / 2);
			  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
			  const distance = R * c;
			 
			  return distance;
			},
			
			//维修列表
			  getList(id1) {
			  		let that=this;
					// let id=123;
			  this.$http({
			  	url:`/api/shop/manage/${id1}`,
			  	method:'GET',
			  	success(res){
			  		that.shopInfo = res.data.data;
			  		console.log(res);
					
			  		console.log("============")
			  		// console.log("repairInfo",this.repairInfo)
			  	}
			  })		
			},
			
			// carWash() {
			// 	// 定义参数
			// 	const param = 2;
			// 	// 拼接参数到路由路径
			// 	const url = `/pages/ys/carFix3_mendainxiangqing/carFix3_mendainxiangqing`;
			// 	uni.$u.route(url);
			// },
			//查看详情
			carWash() {
			    if (this.shopInfo && this.shopInfo.id) {
			  
			      uni.navigateTo({
			  
			        url: `/pages/ys/carFix3_mendainxiangqing/carFix3_mendainxiangqing?id=${(this.shopInfo.id)}`
			  
			      });
			  
			    } else {
			  
			      // 如果 shopInfo 或 shopInfo.id 无效，可以显示一个错误消息或执行其他逻辑
			  
			      console.error('shopInfo 或 shopInfo.id 无效');
			  
			    }
			},
			
			selectClick(index) {
				console.log(index)
				this.show = false
			},
			onCloseAction(index) {
				console.log('关闭动作被触发，索引：', index);
				this.show = false;
			},
			ruturn_btn() {
				uni.$u.route({
					url: '/pages/index/index',
					type: 'tab'
				})
			}
		}
	}
</script>

<style>
	.butt {
		display: flex;
		justify-content: space-between;
		margin-top: 1vh;
	}

	.line2right {
		padding-top: 1vh;
		padding-left: 2vw;
		box-sizing: border-box;
	}

	.line2 {
		display: flex;
	}

	.line2left {
		margin-top: 1vh;
		text-align: left;
		font-size: 25rpx;
	}

	.line1 {
		margin-top: 2vh;
		display: flex;
		justify-content: space-between;
	}

	.line1 :nth-child(1) {
		font-size: 3vh;
		font-weight: 600;
	}

	.line1 :nth-child(2) {
		color: #2F81FA;
	}

	.top {
		background-color: #2F81FA;
		width: 100%;
		height: 1rpx;
		position: fixed;
		position: relative;
		text-align: center;
		padding-top: 4%;
		box-sizing: border-box;
	}

	.arrow {
		height: 28rpx;
		width: 28rpx;
		border-top: 4rpx solid white;
		border-right: 4rpx solid white;
		transform: rotate(225deg);
		position: absolute;
		left: 3%;
	}

	.head {
		position: relative;
		text-align: center;
		height: 35vh;
		width: 100%;
		background-color: #2F81FA;
	}
</style>